<!-- 选择艾特弹框 -->
<!-- 小瓜子 更新于 2020/08/25 -->

<!-- 小瓜子 更新于 2020/08/29 -->
<!-- 1.添加滚动，防止列表过长无法显示
	 2.点击用户的摘要可以艾特用户
	 3.组件与页面之间传值仍需要改 -->

<!-- 小瓜子 更新于 2020/09/02 -->
<!-- 重写组件逻辑 -->
<template>
	<view class="popup_box" :style="'height:' + screenHeight*0.7 + 'px;'">
		<!-- 搜索框 -->
		<input type="text" class="uni-input"  placeholder="请输入想要@的人" maxlength="5" v-model="userName" />
		<!-- 关闭按钮 -->
		<view class="close" @tap='confirm'>×</view>
		<!-- 标题盒子 -->
		<view class="title">
			<view class="title_item" @tap="getActive" :class="isActive == '0' ? 'active' : ''" :data-index="0">
				<text class="text">我的关注 </text>
			</view>
			<view class="title_item" @tap="getActive" :class="isActive == '1' ? 'active' : ''" :data-index="1">
				<text class="text">我的粉丝 </text>
			</view>
		</view>
		<swiper :current="isActive" @change="swiperChange" :style="'height:'+((isActive == '0') ? starHeight : fansHeight)+'px;transition: height 0.25s;'">
			<!-- 关注容器 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + screenHeight*0.6 + 'px;'" >
					<view 
						class="item" 
						:class= "item.selected ? 'sl_item' : ''"
						v-for="(item, index) in starAndFans[0]" 
						:key="index" 
						:data-id="item.id" 
						:data-name="item.nickName" 
						v-show="item.nickName == userName || userName == ''"
						@tap="selectPeople(item)">
						<image :src="item.avatarUrl" mode="aspectFill" class="photo" /><text class="name">{{item.nickName}}</text>
					</view>
				</scroll-view>
			</swiper-item>
			<!-- 粉丝容器 -->
			<swiper-item>
				<scroll-view scroll-y="true" :style="'height:' + screenHeight*0.6 + 'px;'">
					<view 
						class="item" 
						:class= "item.selected ? 'sl_item' : ''"
						v-for="(item, index) in starAndFans[1]" 
						:key="index" 
						:data-id="item.id" 
						:data-name="item.nickName" 
						v-show="item.nickName == userName || userName == ''"
						@tap="selectPeople(item)">
						<image :src="item.avatarUrl" mode="" class="photo" /><text class="name">{{item.nickName}}</text>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isActive: 0,
				userName: '',
				flag: true,
				count: 0
			}
		},
		props: {
			userFans: {
				type: Array,
				default: []
			},
			userStar: {
				type: Array,
				default: []
			},
			pNomore: {
				type: Boolean,
				default: false
			},
			screenHeight: 0,
			screenWidth: 0,
		},
		inject: ['popup'],
		computed: {
			starHeight: function() {
				return this.$props.userStar.length*(20 + 100/750*this.$props.screenWidth)
			},
			fansHeight: function() {
				return this.$props.userFans.length*(20 + 100/750*this.$props.screenWidth)
			},
			starAndFans: function () {
				return [this.$props.userStar,this.$props.userFans]
			}
		},
		methods: {
			getActive(e) {
				this.isActive = e.currentTarget.dataset.index
			},
			// @ 关注 粉丝 页面左右滑动
			swiperChange(e) {
				this.isActive = e.detail.current
			},
			selectPeople(people) {
				let _this = this;
				if(this.$props.pNomore && !people.selected) {
					uni.showToast({
						icon:'none',
						title:'人数已达上限5人了哦'
					})
					return
				} else {
					for(let i = 0; i <= 1; i++) {
						this.starAndFans[i].forEach(item => {
							if (item.id == people.id) {
								item.selected = !item.selected
							}
						})
					}
				}
				this.flag = true;
			},
			confirm() {
				this.$emit('selectPeople')
				// 关闭弹窗
				this.popup.close()
			},
		}
	}
</script>

<style lang="less">
	
	.popup_box {
		background-color: #FFFFFF;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		padding: 20px 0;
		scroll-view {
			height: 25%;
		}
		input {
			width: 80%;
			padding: 5px;
			margin-left: 10px;
			height: 4%;
			font-size: 14px;
			border-radius: 5px;
			background-color: @g-background;
		}
		.close {
			position: absolute;
			top: 15px;
			right: 10px;
			font-size: 24px;
		}
		.selectedPeople {
			padding-left: 10px;
			height: auto;
			line-height: 30px;
			font-size: 12px;
			color: @g-blue;
			.each_people {
				display: inline-block;
				padding-right: 10px;
			}
		}
		.title {
			display: flex;
			line-height: 1.3rem;
			padding-left: 5px;
			margin-top: 20px;
			.title_item {
				width: 180rpx;
				color: #7f7f7f;
				display: flex;
				font-size: 18px;
				justify-content: center;
				align-items: flex-end;
				font-weight: bold;
				padding-bottom: 2px;
				border-bottom: 2px solid transparent;
			}
			.active {
				border-bottom: 2px solid #F76B8A;
				.text {
					color: #3f3f3f;
				}
				.number {
					color: #F76B8A;
				}
			}	
		}
		swiper {
			swiper-item {
				.item {
					margin: 5px;
					padding: 5px;
					padding-left: 10px;
					height: 50px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					border: 3px solid transparent;
					font-size: 18px;
					.photo {
						width: 45px;
						height: 45px;
						border-radius: 50%;
					}
					.name {
						color: #7F7F7F;
						display: inline-block;
						margin-left: 10px;
					}
				}
				// 被选中时
				.sl_item {
					border-left-color: #F76B8A;
				}
			}
		}
	}
</style>
